<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    const w = h = 500
    // 圆心坐标
    let x = 100
    let y = 100
    // 半径
    const r = 20
    // 水平速度
    let xSpeed = 1
    // 垂直速度
    let ySpeed = 3
    drawCircle(x, y, r)

    // 循环定时画图
    setInterval(function () {
        // 清除画布
        ctx.clearRect(0, 0, w, h)
        // 在小球碰到边缘时候,速度取相反即可
        if (x - r <= 0 || x + r >= w) {
            xSpeed = -xSpeed
        }
        x += xSpeed
        // 水平运动

        if (y - r <= 0 || y + r >= h) {
            ySpeed = -ySpeed
        }
        y += ySpeed
        drawCircle(x, y, r)
    }, 10)

    /**
     * 画小球
     * @param x
     * @param y
     * @param r
     */
    function drawCircle(x, y, r) {
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI * 2)
        ctx.fillStyle = 'gold'
        ctx.fill()
    }

</script>
</body>
</html>
